<!-- 充值 -->
<template>
	<div class="main">
		<!-- 标题 -->
		<div class="title flex flex-y flex-between">
			<h3>{{title}}</h3>
			<div class="right">
				<el-button
					v-loading="loading"
					@click="save()"
					class="right"
					type="primary"
					size="small">保存
				</el-button>
				<el-button class="right" size="small" @click="ifShow = !ifShow">变动日志</el-button>
			</div>
		</div>
		<!-- 内容 -->
		<div class="content">
			<dl class="flex flex-y list">
				<dd>序号</dd>
				<dd>锅巴值</dd>
				<dd>安卓</dd>
				<dd>IOS</dd>
			</dl>
			<ul class="flex flex-y list">
				<li>1</li>
				<li>
					<ipt v-model="formData.recharge1[0].paramValue" style="width:50px" class="left10 right10"/>
				</li>
				<li>
					<ipt v-model="formData.recharge1[1].paramValue" style="width:50px" class="left10 right10"/>
				</li>
				<li>
					<ipt v-model="formData.recharge1[2].paramValue" style="width:50px" class="left10 right10"/>
				</li>
			</ul>
			<ul class="flex flex-y list">
				<li>2</li>
				<li>
					<ipt v-model="formData.recharge2[0].paramValue" style="width:50px" class="left10 right10"/>
				</li>
				<li>
					<ipt v-model="formData.recharge2[1].paramValue" style="width:50px" class="left10 right10"/>
				</li>
				<li>
					<ipt v-model="formData.recharge2[2].paramValue" style="width:50px" class="left10 right10"/>
				</li>
			</ul>
			<ul class="flex flex-y list">
				<li>3</li>
				<li>
					<ipt v-model="formData.recharge3[0].paramValue" style="width:50px" class="left10 right10"/>
				</li>
				<li>
					<ipt v-model="formData.recharge3[1].paramValue" style="width:50px" class="left10 right10"/>
				</li>
				<li>
					<ipt v-model="formData.recharge3[2].paramValue" style="width:50px" class="left10 right10"/>
				</li>
			</ul>
			<ul class="flex flex-y list">
				<li>4</li>
				<li>
					<ipt v-model="formData.recharge4[0].paramValue" style="width:50px" class="left10 right10"/>
				</li>
				<li>
					<ipt v-model="formData.recharge4[1].paramValue" style="width:50px" class="left10 right10"/>
				</li>
				<li>
					<ipt v-model="formData.recharge4[2].paramValue" style="width:50px" class="left10 right10"/>
				</li>
			</ul>
			<ul class="flex flex-y list">
				<li>5</li>
				<li>
					<ipt v-model="formData.recharge5[0].paramValue" style="width:50px" class="left10 right10"/>
				</li>
				<li>
					<ipt v-model="formData.recharge5[1].paramValue" style="width:50px" class="left10 right10"/>
				</li>
				<li>
					<ipt v-model="formData.recharge5[2].paramValue" style="width:50px" class="left10 right10"/>
				</li>
			</ul>
			<ul class="flex flex-y list">
				<li>6</li>
				<li>
					<ipt v-model="formData.recharge6[0].paramValue" style="width:50px" class="left10 right10"/>
				</li>
				<li>
					<ipt v-model="formData.recharge6[1].paramValue" style="width:50px" class="left10 right10"/>
				</li>
				<li>
					<ipt v-model="formData.recharge6[2].paramValue" style="width:50px" class="left10 right10"/>
				</li>
			</ul>
		</div>
		<!-- 变动日志 -->
		<el-dialog title="变动日志" :visible.sync="ifShow">
			<airlog query="recharge" />
		</el-dialog>
	</div>
</template>

<script>
import airlog from '@/pages/runManage/param/components/log.vue'
export default {
	props:["title","data"],
	components:{
		airlog
	},
	data () {
		return {
			ifShow:false,
			loading:false,
			//////
			submitData:[], //处理后的数据，提交给后端的
			formData:{
				recharge1:[
					{
						paramValue:0
					},
					{
						paramValue:0
					},
					{
						paramValue:0
					}
				],
				recharge2:[
					{
						paramValue:0
					},
					{
						paramValue:0
					},
					{
						paramValue:0
					}
				],
				recharge3:[
					{
						paramValue:0
					},
					{
						paramValue:0
					},
					{
						paramValue:0
					}
				],
				recharge4:[
					{
						paramValue:0
					},
					{
						paramValue:0
					},
					{
						paramValue:0
					}
				],
				recharge5:[
					{
						paramValue:0
					},
					{
						paramValue:0
					},
					{
						paramValue:0
					}
				],
				recharge6:[
					{
						paramValue:0
					},
					{
						paramValue:0
					},
					{
						paramValue:0
					}
				],
			},
		}
	},
	watch:{
		data(val){
			this.formData = val;
		},
	},
	methods:{
		save:function(){
			this.loading = true;
			// 拼接字段
			this.opData();
			// 请求
			HTTP('financeSet_save', this.submitData)
			.then(res=>{
				this.loading = false;
				if(res.code == 200){
					this.common.msg('保存成功');
				}
				else{
					this.common.msg(res.msg,'error');
				}
			})
		},
		//处理数据
		opData:function(){
			for(let i in this.formData){
				this.formData[i].map(o=>{
					this.submitData.push({
						uid:o.uid,
						paramType:o.paramType,
						paramName:o.paramName,
						paramValue:o.paramValue,
					});
				})
			}
			console.log(this.submitData);
		},
	},
	mounted(){

	}
}
</script>

<style lang="scss" scoped>

	/deep/ .el-input__inner{
		width: 50px;
		text-align: center;
		height: 33px;
		line-height: 33px;
	}
	/deep/ .el-input-number--mini{
		width: 111px;
	}
	.main{
		padding: 25px 30px;
		//标题
		.title{
			position: relative;
			h3{
				font-size: 16px;
			}
			h3:before{
				position: absolute;
				left: -16px;
				top: 5px;
				content:'\25CF';
				color: $blue;
			}
		}
	}
	.content{
		margin-top: 40px;
		dl{
			font-weight: bold;
			color: #666;
		}
		ul{
			margin: 12px 0;
		}
		.list{
			margin-left: -40px;
			dd,li{
				width: 120px;
				text-align: center;
			}
		}
	}
</style>
